<%@page isELIgnored="false" pageEncoding="UTF-8" contentType="text/html; UTF-8" %>
<html>
<head>
    <title>Title</title>
    <script src="layui/layui.js"></script>
    <link rel="stylesheet" href="layui/css/layui.css">
    <script src="js/jquery-1.8.3.js"></script>
</head>
<body>
    <form class="layui-form" style="display: none" id="articleForm" lay-filter="form"> <!-- 提示：如果你不想用form，你可以换成div等任何一个普通元素 -->
        <input type="hidden" name="id">
        <div class="layui-form-item">
            <label class="layui-form-label">文章名称:</label>
            <div class="layui-input-inline">
                <input type="text" name="name" placeholder="请输入" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">发布日期:</label>
            <div class="layui-input-inline">
                <input type="text" name="date" id="date" placeholder="请输入" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <button type="button" class="layui-btn" id="upload">
                <i class="layui-icon">&#xe67c;</i>上传图片
            </button>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">图片名称:</label>
            <div class="layui-input-inline">
                <input type="text" id="image" name="image" readonly placeholder="请先选择图片" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">下拉选择框</label>
            <div class="layui-input-block">
                <select name="gid" lay-filter="gid" id="gid" >

                </select>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">单选框</label>
            <div class="layui-input-inline">
                <input type="radio" name="status" value="0" title="正常显示" checked>
                <input type="radio" name="status" value="1" title="冻结状态">
            </div>
        </div>
        <div class="layui-form-item layui-form-text">
            <label class="layui-form-label">请填写内容:</label>
            <div class="layui-input-block">
                <textarea placeholder="请输入内容" id="content" name="content" class="layui-textarea"></textarea>
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-input-inline">
                <button class="layui-btn" lay-submit lay-filter="submit">立即提交</button>
                <button type="reset" class="layui-btn layui-btn-primary">重置</button>
            </div>
        </div>
    </form>
        <%--模糊查询 输入框及按钮  --%>
        <div class="layui-form-item">
            <label class="layui-form-label">请输入文章名称:</label>
            <div class="layui-input-inline">
                <input type="text" name="name" id="name" placeholder="请输入文章名称" autocomplete="off" class="layui-input">
            </div>
        </div>
        <button type="button" id="button" class="layui-btn layui-btn-warm">
            查询
        </button>

        <table id="article" lay-filter="article"></table>

        <script type="text/html" id="img">
            <img src="{{d.image}}"/>
        </script>
        <script type="text/html" id="gName">
            {{ d.guru.name }}
        </script>
        <script type="text/html" id="status">
            {{# if(d.status==0){        }}
                正常显示
            {{# }else if(d.status==1){  }}
                冻结状态
            {{# }                       }}
        </script>
        <script type="text/html" id="head">
            <a class="layui-btn layui-btn-lg" lay-event="insert">添加</a>
        </script>
        <script type="text/html" id="body">
            <a class="layui-btn layui-btn-xs layui-form-danger" lay-event="delete">删除(状态改变)</a>
            <a class="layui-btn layui-btn-xs" lay-event="update">修改</a>
        </script>
        <script>
            layui.use(['table','form','laydate','upload'],function (obj) {
                var table = layui.table;
                var form = layui.form;
                var laydate = layui.laydate;
                var upload = layui.upload;
                //执行一个laydate实例
                laydate.render({
                    elem: '#date' //指定元素
                });
                //执行实例  文件上传
                var uploadInst = upload.render({
                    elem: '#upload' //绑定元素
                    ,url: 'article/upload' //上传接口
                    ,done: function(res){
                        //上传完毕回调
                        $("#image").val(res.imageName);
                    }
                    ,error: function(){
                        //请求异常回调
                    }
                });
                table.render({
                    elem:"#article",
                    page:true,
                    url:"article/selectAllArticle",
                    limit:3,
                    limits:[3,5,7],
                    toolbar:"#head",
                    cols:[[
                        {title:"编号",field:"id"},
                        {title:"文章名称",field:"name"},
                        {title:"图片",templet:"#img"},
                        {title:"内容",field:"content"},
                        {title:"上师",templet:"#gName"},
                        {title:"发布时间",field:"date"},
                        {title:"状态",templet:"#status"},
                        {title:"操作栏",toolbar:"#body"},
                    ]]
                })
                // ------------模糊查询------------------------
                $("#button").click(function () {
                    table.reload('article',{
                        where:{
                            name:$("#name").val()
                        },
                        page:{
                            curr:1
                        }
                    })

                })


        //  ----------  表格体时间绑定---------------------
            table.on('tool(article)',function (obj) {
                if(obj.event == 'delete'){
                    layer.confirm('确定要删除?',function (index) {
                        $.ajax({
                            url:"article/deleteArticle",
                            data:"id="+obj.data.id+"&status="+obj.data.status,
                            dataType:"json",
                            success:function (result) {
                                if(result.isDelete){
                                    layer.close(index);
                                    table.reload('article');
                                }
                            }
                        })
                    })
                }else if(obj.event == 'update'){
                    $.ajax({
                        url:"article/selectOneArticle",
                        data:"id="+obj.data.id,
                        dataType:"json",
                        success:function (result) {
                            form.val('form',{
                                id:result.id,
                                name:result.name,
                                image:result.image,
                                content:result.content,
                                gid:result.gid,
                                date:result.date,
                                status:result.status
                            })
                        }
                    })
                    layer.open({
                        title:"修改页面",
                        type:1,
                        content:$("#articleForm"),
                        area:['350px','400px']
                    })
                    form.on('submit(submit)',function () {
                        $.ajax({
                            url:"article/updateArticle",
                            data:$("#articleForm").serialize(),
                            dataType:"json",
                            success:function (result) {
                                if(result.isUpdate){
                                    layer.closeAll();
                                    table.reload('article');
                                    $("#articleForm")[0].reset();
                                }
                            }
                        })
                        return false;
                    })
                }
            })
            //------------------表格头事件绑定---------------------------------
            table.on('toolbar(article)',function (obj) {
                if(obj.event == 'insert'){
                    layer.open({
                        title:"添加页面",
                        type:1,
                        content:$("#articleForm"),
                        area:['350px','400px']
                    })
                    form.on('submit(submit)',function () {
                        $.ajax({
                            url:"article/insertArticle",
                            data:$("#articleForm").serialize(),
                            dataType:"json",
                            success:function (result) {
                                if(result.isAdd){
                                    layer.closeAll();
                                    table.reload('article');
                                    $("#articleForm")[0].reset();
                                }
                            }
                        })
                        return false;
                    })
                }
            })
                //---------------查询所有大师并赋值给下拉框-----------------------------
                $.ajax({
                    url:"guru/selectGuru",
                    dataType:"json",
                    success:function (result) {
                        var s = '';
                        $(result).each(function (index, obj) {
                            s+="<option value='"+obj.id+"'>'"+obj.name+"'</option>"
                        })
                        $("#gid").html(s);
                        //重新渲染表单下拉框页面
                        form.render('select')
                    }
                })
            })
        </script>
</body>
</html>
